<template>
  <div class="newupload">
    <form class="mui-input-group">
        <div class="mui-input-row">
            <input type="text" placeholder="标题(仅限20字)" v-model="title" maxlength="20">
        </div>
    </form>
    <div class="mui-input-row">
        <textarea id="textarea" rows="3" placeholder="写入文章摘要(仅限200字)" v-model="zhaiyao" maxlength="200"></textarea>
    </div>
    <quill-editor v-model="content" ref="myquilleditor" :options = "editorOption" class="quilleditor"></quill-editor>
    <mt-button type="primary" size="large" @click="uploadinfo">确定</mt-button>
    <mt-button type="danger" size="large" @click="cancleupload">取消</mt-button>
    <input type="file" 
    id="field" 
    enctype="multipart/form-data" 
    accept="image/jpg,image/jpeg,image/png,image/gif" 
    style="display:none" 
    @change ="imgupload"
    >
  </div>
</template>

<script>
import mui from "../../lib/js/mui.min.js";
const toolbaroptopn = [
    ['bold','underline','italic','strike'],
    ['blockquote','code-block'],
    [{header:1},{header:2}],
    [{list:'ordered',list:'bullet'}],
    [{script:'sub'},{script:'super'}],
    [{indent:"+1"},{indent:"-1"}],
    [{direction:'rtl'}],
    [{size:['small',false,'large','huge']}],
    [{color:[]},{background:[]}],
    [{align:[]}],
    ['image']
]
export default {
    data(){
        return{
            title:"",
            zhaiyao:"",
            content:"",
            editorOption:{
                modules:{
                    toolbar:{
                        container: toolbaroptopn,
                        handlers:{
                            'image':function(e){
                               if(e){
                                   document.querySelector("#field").click();
                               }else{
                                   this.editor.format('image',false)
                               }
                            }
                        }
                    }
                },
                placeholder:"123"
            }
        }
    },
    methods:{
        uploadinfo(){
            let title = this.title;
            let content = this.content;
            this.$http.post("txtupload",{title,content}).then((result)=>{
                let data = result.body;
                if(data.status == 0){//上传成功
                    let txturl = data.message[0].name;
                    let title = this.title;
                    let zhaiyao = this.zhaiyao;
                    let time = this.$moment(new Date()).format('YYYY/MM/DD HH:mm:ss');
                    let first_imgurl = this.$store.getters.getnewlist_firstimg;
                    let obj = {txturl,title,zhaiyao,time,first_imgurl};            
                    this.$http.post("setnewinfo",obj).then((result)=>{
                        if(result.body.status == 0){
                            mui.toast('上传至后端成功');
                            this.title = "";
                            this.zhaiyao = "";
                            this.content = "";
                        }
                    })
                }else{
                    mui.toast('上传失败哦！！！！');
                }
            })
        },
        cancleupload(){
            this.title = "";
            this.zhaiyao = "";
            this.content = "";
            mui.toast("清空完成");
        },
        imgupload(e){         
            let img = e.target.files[0];
            var formdata = new FormData();
            formdata.append('img',img);
            this.$http.post("ImageUpload",formdata).then((result)=>{
                let url = result.body[0];
                this.$store.commit('setnewlist_firstimg',url);
                let length = this.editor.getSelection().index;
                this.editor.insertEmbed(length, 'image', url)
                this.editor.setSelection(length + 1)
            })
        }
    },
    computed:{
        editor(){//实时富文本实例
            return this.$refs.myquilleditor.quill;
        }

    }
}
</script>

<style lang = 'less'>
.newupload{
    #textarea{
        margin-bottom: 0;
        padding: 4px 8px;
        font-size: 14px;
    }
    .mui-input-group{
        margin-bottom: 5px;
        input{
            font-size: 12px;
            padding: 4px 8px;
        }
    }
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .quilleditor{
        min-height: 200px;
        display: flex;
        flex-direction: column;
    }
    .ql-container.ql-snow{
        flex: 1;
    }
    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 0px;
    }
    .ql-snow .ql-picker.ql-size {
        width: 70px;
    }
    .mint-button-text{
       
        margin-bottom: 0;
    }
    .mint-button--large {
        margin-top:5px;
    }
}
</style>